import type { ComputedRef, ComponentPublicInstance } from 'vue';
import type { InputProps } from './Input';

export type InputType =
  | 'tel'
  | 'text'
  | 'digit'
  | 'number'
  | 'search'
  | 'password'
  | 'textarea';

export type InputTextAlign = 'left' | 'center' | 'right';

export type InputClearTrigger = 'always' | 'focus';

export type InputFormatTrigger = 'onBlur' | 'onChange';

export type InputValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';

export type InputAutosizeConfig = {
  maxHeight?: number;
  minHeight?: number;
};

export type InputValidateError = {
  name?: string;
  message: string;
};

export type InputRule = {
  pattern?: RegExp;
  trigger?: InputValidateTrigger;
  message?: string | ((value: any, rule: InputRule) => string);
  required?: boolean;
  validator?: (
    value: any,
    rule: InputRule
  ) => boolean | string | Promise<boolean | string>;
  formatter?: (value: any, rule: InputRule) => string;
};

// Shared props of Input and Form
export type InputFormSharedProps =
  | 'colon'
  | 'disabled'
  | 'readonly'
  | 'labelWidth'
  | 'labelAlign'
  | 'inputAlign'
  | 'errorMessageAlign';

export type InputExpose = {
  blur: () => void | undefined;
  focus: () => void | undefined;
  validate: (
    rules?: InputRule[] | undefined
  ) => Promise<void | InputValidateError>;
  resetValidation: () => void;
  /**
   * @private
   */
  formValue: ComputedRef<unknown>;
};

export type InputInstance = ComponentPublicInstance<InputProps, InputExpose>;

declare global {
  interface EventTarget {
    composing?: boolean;
  }
}
